<template>
	<view class="mainPage whitePage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title" shadow></public-head>
		<view class="issue-box">
			<view class="title">
			<input type="text" v-model.trim="articleTitle" placeholder-style="color: #343434;font-size: 36rpx;" placeholder="请输入文章标题"  />
		</view>
		<robin-editor style="letter-spacing:5rpx;" class="editor" :imageUploader="uploadImg" :muiltImage="true" ref="showToolbar" @func="getMsgFormSon">
		</robin-editor>
		<view class="fabu-box">
			<view class="left">
				<image @click="tanchu" class="t" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/t.png" mode=""></image>
				<image class="tupian" @click="tupian" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/tupian.png" mode=""></image>
				<!-- <image class="shipin" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/shipin.png" mode=""></image> -->
				<navigator hover-class="none" url="./drafts">
					<text class="caogao">草稿</text>
				</navigator>
			</view>
			<view class="right active" v-if="articleTitle&&html" @click="fabu">
				发布
			</view>
			<view class="right " v-else>
				发布
			</view>
		</view>
		<!-- <view class="box-gongneng">
			<view class="caogao">
				草稿
			</view>
			<view class="fabu">
				发布
			</view>
		</view> -->
		</view>
	</view>
</template>

<script>
	var that
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				title: '发布',
				fixedTopHeight:0,
				html: '',
				articleTitle:"",
				img:"",
			}
		},
		watch:{
			articleTitle(){
				that.$store.state.articleTitle=that.articleTitle
			},
			html(){
				that.$store.state.html=that.html
			}
		},
		onLoad() {
			that=this
		},
		methods: {
			tankuang(){
				uni.showModal({
					title: '取消发布',
					content: '未发布内容将会保存在草稿箱',
					cancelText:"暂不发布",
					cancelColor:"#343434",
					confirmText:"继续发布",
					confirmColor:"#FE7600",
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
							uni.navigateBack({
								delta: 1
							});
						}
					}
				});
			},
			getMsgFormSon(data){
				// console.log(data)
				var htmls=data.html
				htmls=htmls.replace(/<p>/g,"");
				htmls=htmls.replace(/<\/p>/g,"");
				htmls=htmls.replace(/\<p><br><\/p>/g,"");
				htmls=htmls.replace(/<br>/g,"");
				console.log(htmls)
				if(data.html=="<p><br></p>"){
					that.html=""
					return
				}
				if (htmls == ''||!htmls.match(/^(?!(\s+$))/)){
					console.log('htmls',htmls)
					// that.html=""
					return
				}else{
					that.html=data.html
				}
			},
			uploadImg: function(img, callback) {
				//上传图片逻辑,将图片链接传给回调函数
				callback(img)
				// console.log(img,9999)
				that.img=img
				console.log(that.img,777)
			},
			tanchu(){
				that.$refs.showToolbar.showToolbarMethod();
			},
			tupian(){
				that.$refs.showToolbar.insertImage();
			},
			fabu(){
				var imgs = [];
				that.html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function (match, capture) {
				  imgs.push(capture);
				});
				// console.log(imgs[0],9999)
				// return
				// console.log(that.html)
				console.log(that.articleTitle.length)
				// if(that.articleTitle.match(/[\u4E00-\u9FA5]/g).length>20){
				if(that.articleTitle.length>20){
					uni.showToast({
						icon:"none",
						title:"文章标题字数不能超过20字!"
					})
					return
				}
				// console.log(that.articleTitle.match(/[\u4E00-\u9FA5]/g).length,999)
				// console.log(that.articleTitle.length,999)
				if(that.html=="<p><br></p>"){
					uni.showToast({
						icon:"none",
						title:"文章内容不能为空！"
					})
					return
				}else{
					uni.showLoading({
						mask: true,
						title:"正在发布"
					});
					that.$postAjax1('Doctor_add_article',{ //https://ask.suoweilai.com/Doctor_add_article  医生端 - 添加医生发表文章
						content:that.html,  //内容发布
						title:that.articleTitle,    //文章标题
						thumb:imgs.length?imgs[0]:'',    //缩略图
						write_status:1,    //发布状态(0草稿 1发表)
					},function(data){
						// console.log(data,99999)
						uni.hideLoading()
						uni.showToast({
							icon:"none",
							title:"发布成功,等待后台审核",
							duration:2500
						})
						that.$store.state.articleTitle=""
						that.$store.state.html=""
						setTimeout(()=>{
							uni.redirectTo({
							  url:"./myArticle"
							});
						},500)
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.issue-box{
	padding: 0 32rpx;
	.title{
		input{
			padding: 40rpx 0 30rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #343434;
			line-height: 50rpx;
			width: 100%;
			border-bottom: 2rpx solid rgba(0,0,0,0.08);
		}
	}
	.box-gongneng{
		display: flex;
		justify-content: space-between;
		.caogao{
			font-size: 24rpx;
			font-weight: 400;
			line-height: 34rpx;
			padding: 6rpx 36rpx;
			color: #FFFFFF;
			background: linear-gradient(223deg, #FF9331 0%, #FE7600 100%);
			border-radius: 4rpx;
		}
		.fabu{
			font-size: 24rpx;
			font-weight: 400;
			color: #6D7278;
			line-height: 34rpx;
			padding: 6rpx 36rpx;
			background: #EFF0EF;
			border-radius: 4rpx;
			&.active{
				color: #FFFFFF;
				background: linear-gradient(223deg, #FF9331 0%, #FE7600 100%);
			}
		}
	}
	.fabu-box{
		padding-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			.t{
				display: inline-block;
				width: 38rpx;
				height: 38rpx;
				margin-right: 54rpx;
				vertical-align: middle;
			}
			.tupian{
				display: inline-block;
				width: 46rpx;
				height: 34rpx;
				margin-right: 54rpx;
				vertical-align: middle;
			}
			.shipin{
				display: inline-block;
				width: 46rpx;
				height: 30rpx;
				margin-right: 54rpx;
				vertical-align: middle;
			}
			navigator{
				display: inline-block;
				.caogao{
					font-size: 28rpx;
					font-weight: 400;
					color: #FE7A07;
					line-height: 40rpx;
				}
			}
		}
		.right{
			background: #EFF0EF;
			border-radius: 4rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #6D7278;
			line-height: 34rpx;
			padding: 6rpx 36rpx;
			&.active{
				color: #FFFFFF;
				background: linear-gradient(223deg, #FF9331 0%, #FE7600 100%);
			}
		}
	}
}

.box{
	padding: 0 32rpx;
	.title{
		border-bottom: 2rpx solid rgba(0,0,0,0.08);
		input{
			padding: 40rpx 0 30rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #343434;
			line-height: 50rpx;
			letter-spacing: 1px;
		}
	}
	.textarea-box{
		textarea{
			width: 100%;
			height: 800rpx;
			padding: 46rpx 0;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
		}
		border-bottom: 2rpx solid rgba(0,0,0,0.08);
	}
	.fabu-box{
		padding-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			.t{
				display: inline-block;
				width: 38rpx;
				height: 38rpx;
				margin-right: 54rpx;
				vertical-align: middle;
			}
			.tupian{
				display: inline-block;
				width: 46rpx;
				height: 34rpx;
				margin-right: 54rpx;
				vertical-align: middle;
			}
			.shipin{
				display: inline-block;
				width: 46rpx;
				height: 30rpx;
				margin-right: 54rpx;
				vertical-align: middle;
			}
			navigator{
				display: inline-block;
				.caogao{
					font-size: 28rpx;
					font-weight: 400;
					color: #FE7A07;
					line-height: 40rpx;
				}
			}
		}
		.right{
			background: #EFF0EF;
			border-radius: 4rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #6D7278;
			line-height: 34rpx;
			padding: 6rpx 36rpx;
			&.active{
				color: #FFFFFF;
				background: linear-gradient(223deg, #FF9331 0%, #FE7600 100%);
			}
		}
	}
}
</style>
